<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>Simple Web Terminal</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js"></script>
  <style>
    body {
      font-family: monospace;
      background-color: #111;
      color: #0f0;
      margin: 0;
      padding: 10px;
    }
    #output {
      width: 100%;
      height: 400px;
      background-color: #000;
      color: #0f0;
      border: 1px solid #555;
      overflow-y: scroll;
      white-space: pre-wrap;
      padding: 5px;
    }
    #input-box {
      width: 90%;
      padding: 5px;
      border: none;
      background: #222;
      color: #0f0;
      font-family: monospace;
    }
    #send-btn {
      padding: 5px 10px;
      background: #333;
      color: #0f0;
      border: 1px solid #0f0;
      cursor: pointer;
    }
    #send-btn:hover {
      background: #0f0;
      color: #000;
    }
  </style>
</head>
<body>
  <h3>Web Terminal (no xterm.js)</h3>
  <div id="output"></div>
  <br />
  <input id="input-box" placeholder="输入命令..." />
  <button id="send-btn">发送</button>

  <script>
    // 连接到后端
    const socket = io("/pty");

    const outputDiv = document.getElementById("output");
    const inputBox = document.getElementById("input-box");
    const sendBtn = document.getElementById("send-btn");

    // 显示输出
    socket.on("pty-output", (data) => {
      outputDiv.textContent += data.output;
      outputDiv.scrollTop = outputDiv.scrollHeight;
    });

    // 发送命令
    function sendCommand() {
      const cmd = inputBox.value.trim();
      if (cmd) {
        socket.emit("pty-input", { input: cmd + "\n" });
        inputBox.value = "";
      }
    }

    sendBtn.onclick = sendCommand;

    // 支持回车键发送
    inputBox.addEventListener("keypress", (event) => {
      if (event.key === "Enter") {
        event.preventDefault();
        sendCommand();
      }
    });
  </script>
</body>
</html>
